<template>
  <div class="orderFrom">
    <span class="searItem">
      <a-icon slot="prefix" type="search" class="search-ico"/>
      <a-input-search placeholder="请输入房号查询" v-model="fh" @search="onSearch">
        <a-button slot="enterButton" style="color:#1890FF;" class="font12">{{ $t('public.search') }}</a-button>
      </a-input-search>
    </span>
    <span style="float:left;">&emsp;<a-button class="font12" @click="handleReset">{{ $t('public.reset') }}</a-button></span>
    <span>
      <a-button type="primary" class="primary_linear" @click="deHouse">{{ $t('resource.declaration') }}</a-button>&emsp;&emsp;
      <!-- <a-button>认领房源</a-button> -->
    </span>
    <declaration-housing ref="dehouseModle" v-if="isDehouseModle"></declaration-housing>
  </div>
</template>

<script>
import DeclarationHousing from './DeclarationHousing'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'SourceSearch',
  components: {
    DeclarationHousing
  },
  data () {
    return {
      isDehouseModle: false
    }
  },
  computed: {
    ...mapGetters([
      'houseParams'
    ]),
    fh: {
      get () {
        return this.houseParams.fh
      },
      set (value) {
        const params = {}
        params.fh = value
        this.setHouseParams(params)
      }
    }
  },
  methods: {
    ...mapMutations([
      'setHouseParams'
    ]),
    onSearch (v) {
      setTimeout(() => {
        this.$emit('search')
      }, 500)
    },
    handleReset () {
      this.setHouseParams({ fh: '' })
      setTimeout(() => {
        this.$emit('search')
      }, 500)
    },
    deHouse () {
      this.isDehouseModle = true
      if (this.$refs.dehouseModle) {
        this.$refs.dehouseModle.openDeclare()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.orderFrom{
  padding:14px 16px ;
  text-align: right;
  .h4{color:#333333;font-size: 16px;font-weight: 500}
  .search-ico{position: absolute;top:10px;left:18px;z-index:2;color:#999999}
  .searItem{
    float:left;
    width:284px;
    position: relative;
    margin-top:0px;
  }
  /deep/ .ant-input-search.ant-input-search-enter-button > .ant-input{
    padding-left:36px;
  }
  .font12{font-size:12px !important;}
  /deep/.ant-input-affix-wrapper .ant-input{
    font-size:12px !important;
  }
  // .primary_linear {
  //   background: linear-gradient(124deg, rgba(71, 178, 222, 1) 0%, rgba(24, 144, 255, 1) 100%);
  // }
}
</style>
</style>
